<!DOCTYPE HTML>
<html>

<head>
  <title>Layer Quick Construction</title>
  <style>html,body {margin:0;padding:0;}</style>
  <link rel="stylesheet" type="text/css" href="console.css"></link>
  <link rel="stylesheet" type="text/css" href="console-input.css"></link>
  <link rel="stylesheet" type="text/css" href="quick_construction.css"></link>
</head>

<body>

<div id="layer-quick-construction-console" class="layer-console">
  <div class="layer-console-title">Layer Construction</div>

  <div class="layer-console-body">
    <fieldset>
      <ol>

        <li>
          <label for="layer-quick-construction-name"
                 class="layer-console-input-label">Name</label>
          <input id="layer-quick-construction-name"
                 type="text" value="" maxlength="100" size="30">

        <li>
          <fieldset class="layer-console-radio-fieldset">
            <label class="layer-console-input-label">Enabled</label>
            <ol>
              <li>
                <label for="layer-quick-construction-enabled-always">
                  Always
                </label>
                <input id="layer-quick-construction-enabled-always"
                       type="radio" name="enabled">
              <li>
                <label for="layer-quick-construction-enabled-on">On</label>
                <input id="layer-quick-construction-enabled-on"
                       type="radio" name="enabled">
              <li>
                <label for="layer-quick-construction-enabled-off">Off</label>
                <input id="layer-quick-construction-enabled-off"
                       type="radio" name="enabled">
            </ol>
          </fieldset>

        <li>
          <fieldset class="layer-console-radio-fieldset">
            <label class="layer-console-input-label">On-demand</label>
            <ol>
              <li>
                <label for="layer-quick-construction-ondemand-on">On</label>
                <input id="layer-quick-construction-ondemand-on"
                       type="radio" name="ondemand">
              <li>
                <label for="layer-quick-construction-ondemand-off">Off</label>
                <input id="layer-quick-construction-ondemand-off"
                       type="radio" name="ondemand">
              <li>
                <label for="layer-quick-construction-ondemand-never">
                  Never
                </label>
                <input id="layer-quick-construction-ondemand-never"
                       type="radio" name="ondemand">
            </ol>
          </fieldset>

        <li>
          <select id="layer-quick-constuction-code-select">
            <option value="background-js">Background Javascript Code</option>
            <option value="content-js">Content-side Javascript Code</option>
            <option value="content-css">Content-side CSS Code</option>
          </select>
          <div></div>
          <textarea id="layer-quick-construction-code">
          </textarea>
          <!-- Hidden textareas are intended for temporary storage. -->
          <textarea style="display:none"
                    id="layer-quick-construction-js-bg">
          </textarea>
          <textarea style="display:none"
                    id="layer-quick-construction-js-cs">
          </textarea>
          <textarea style="display:none"
                    id="layer-quick-construction-css">
          </textarea>

      </ol>
    </fieldset>
  </div> <!-- class="layer-console-body" -->

  <div class="layer-console-footer">
    <button id="layer-quick-construction-save" type="button">Save</button>
    <button id="layer-quick-construction-close"
            class="layer-console-button-right" type="button">Close</button>
    <button id="layer-quick-construction-reset"
            class="layer-console-button-right" type="button">Reset</button>
  </div>

</div> <!-- class="layer-console" -->

</body>

</html>

